<template>
  <div>This is Ellipsis</div>
  <div class="demo-inner-divider">设置属性 length 可以按照指定长度省略。</div>
  <e-ellipsis :text="text" :length="100" />
  <div class="demo-inner-divider" >
    设置属性 tooltip 可以以 Tooltip 的形式显示完整的内容。
  </div>
  <e-ellipsis :text="text" :length="100" tooltip />
  <div class="demo-inner-divider"> 设置属性 height 可以按照指定高度省略。</div>
  <div style="width:400px;margin: 0 auto;">
    <e-ellipsis :text="text" :height="50" tooltip />
  </div>
  <div class="demo-inner-divider">设置属性 lines 可以指定最大行数，超出这个行数的文本会自动截取。</div>
  <div style="width:400px;margin: 0 auto;">
    <e-ellipsis :text="text" :lines="3" tooltip transfer @on-show="onShow"	/>
  </div>
  <ellipsisMd class="markdown-body" style="margin-top:50px"></ellipsisMd>
</template>

<script setup>
import ellipsisMd from "../../docs/ellipsis.md"
import {ref} from "vue"

const text=ref('史蒂夫·乔布斯（英语：Steve Jobs），是一名美国企业家、营销家和发明家，苹果公司的联合创始人之一，曾任董事长及首席执行官职位，NeXT创办人及首席执行官，也是皮克斯动画的创办人并曾任首席执行官，2006年为华特迪士尼公司的董事会成员。2017年9月苹果发布会举行的地方，以他命名为 Steve Jobs Theater 。')

const onShow=()=>{
  console.log('onShow')
}
</script>
